<template>
	<view class="">
		<view class="content">
			<view class="vip-box">
				<view class="cd-name">{{data.info.name}}</view>
				<view class="flex-justify-s info-b">
					<view class="flex-center-a">
						<view class="flex-align-center info">
							<img src="../../../static/img/img/fx-time.png" class="fx-time" alt="">
							<text class="text">营业 {{data.info.businessTimeStart}}-{{data.info.businessTimeEnd}}</text>
						</view>
						<view class="flex-align-center info">
							<img src="../../../static/img/img/fx-dingwei.png" class="fx-time" alt="">
							<text class="text"> {{data.info.venueAddress}}</text>
						</view>
					</view>
					<view class="flex-align-center">
						<view class="flex-center-r ca-in">
							<text class="number">{{data.info.memberType}}</text>
							<text class="card-text">会员卡</text>
						</view>
						<view class="flex-center-r ca-in">
							<text class="number">{{data.info.memberNum}}</text>
							<text class="card-text">会员</text>
						</view>
					</view>
				</view>

			</view>
			<view class="vip-card">
				<vipCard type='vip' :item="ite" v-for="(ite,idx) in data.info.members" :key="idx"></vipCard>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		echoMemberBySiteId
	} from '../../../requestApi/api.js';
	import vipCard from "@/compoments/vip/vipCard.vue";
	const data = ref({
		id: '',
		info: {},
	})
	onLoad((e) => {
		data.value.id = e.id
		getDetailAndList();
	})
	//获取场地信息和会员卡列表
	const getDetailAndList = () => {
		echoMemberBySiteId({
			id: data.value.id
		}).then(res => {
			data.value.info = res.data;
		})
	};
</script>

<style lang="scss">
	.content {
		padding: 42rpx;

		.vip-box {
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #F2F2F2;
			margin-bottom: 38rpx;

			.info-b {
				align-items: flex-start;
			}

			.ca-in {
				margin-left: 52rpx;

				.number {
					font-size: 30rpx;
					font-weight: bold;
					color: #2C2C2C;
					// margin-bottom: 6rpx;
				}

				.card-text {
					font-size: 20rpx;
					color: #A5A5A5;
				}
			}


			.cd-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #2C2C2C;
				margin-bottom: 18rpx;
			}


			.info {
				margin-bottom: 10rpx;

				.fx-time {
					width: 20rpx;
					height: 20rpx;
					margin-right: 20rpx;
				}

				.text {
					font-size: 20rpx;
					color: #A5A5A5;
				}
			}
		}

		.vip-card {
			padding: 0 10rpx;
		}

	}
</style>